<template>
	<view class="setting_content">
		<!-- 	<view class="admin_main">
			<p class="fonts14 fontz" style="margin-bottom: 8px;">账号</p>
			<el-input v-model="input" placeholder="请输入账号" disabled></el-input>
		</view> -->
		<el-form style="padding: 0px 10px;" ref="form" :model="form" :rules="rules" label-width="80px"
			label-position="top">
			<el-form-item label="头像">
				<UploadImageUp :data="upLoadImages" @uploadImageClick="uploadImageClicks_" />
			</el-form-item>
			<el-form-item label="账号">
				<el-input v-model="input" placeholder="请输入账号" disabled></el-input>
				<el-button type="primary" @click="changePhone()">修改绑定手机</el-button>
			</el-form-item>
			<el-form-item label="绑定邮箱" prop="email" class="el-form-item-login">
				<el-input v-model="form.email" placeholder="请设置邮箱"></el-input>
			</el-form-item>
			<el-form-item label="注册日期">
				<span>{{ form.createTime }}</span>
			</el-form-item>
			<el-form-item label="最后登录时间">
				<span>{{ form.loginDate }}</span>
			</el-form-item>
			<el-form-item label="">

			</el-form-item>
			<el-form-item label="">
				<view class="flex jcc" style="width: 350px; color: #2f6cbc;cursor: pointer;">
					<el-button type="info" @click="userDeleteApi()" style="width: 100%;">注销账号</el-button>
				</view>
			</el-form-item>
		</el-form>
		<view class="position_footer flex aic jcsb">
			<el-button @click="back()" style="width: 40%;">返回</el-button>
			<el-button type="primary" style="width: 60%;" @click="updateUserInfoApi('form')">
				保存</el-button>
		</view>
		<el-dialog title="提示" :visible.sync="dialogVisible" width="350px">
			<span>是否去确定注销此账户</span>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="sure()">确 定</el-button>
			</span>
		</el-dialog>
	</view>
</template>

<script>
	import {
		getInfo
	} from "@/api/login"
	import UploadImageUp from "@/pages/components/UploadImageUp.vue"
	import {
		updatePassword,
		get_reg_sms,
		resetPhonenumber,
		updateUserInfo,
		userDelete
	} from "@/api/my.js"
	export default {
		components: {
			UploadImageUp
		},
		data() {
			var checkPhone = (rule, value, callback) => {
				if (!value) {
					return callback(new Error("手机号不能为空"));
				} else {
					const reg = /^1[3-9][0-9]\d{8}$/;
					// 这里定义的reg变量没有加引号，所以是一种特殊的数据类型，即正则，可以直接用test()方法
					if (reg.test(value)) {
						callback();
					} else {
						// 具体错误信息没有提示
						return callback(new Error("请输入正确的手机号"));
					}
				}
			}
			return {
				dialogVisible: false,
				upLoadImages: {
					tip: "请上传1寸照，文件大小不超过2M，支持jpg、jpeg、png格式",
					url: "",
				},
				show: true,
				text: '获取验证码',
				type: 0,
				count: 60,
				input: "",
				form: {
					password: "",
					code: "",
					phone: "",
					oldPassword: "",
					passwords: "",
					email: ""
				},
				forms: {

				},
				rules: {
					phone: [{
						required: true,
						message: '请输入手机号',
						trigger: 'blur'
					}, {
						validator: checkPhone,
						trigger: "blur"
					}],
					email: [{
						type: "email",
						required: true,
						message: '请输入邮箱',
						trigger: 'blur'
					}, ],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}],
					passwords: [{
						required: true,
						message: '请再次输入密码',
						trigger: 'blur'
					}],
					// phone: [{
					//     required: true,
					//     message: '请输入手机号',
					//     trigger: 'blur'
					// }, {
					//     validator: checkPhone,
					//     trigger: "blur"
					// }],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					// code: [{
					//     required: true,
					//     message: '请输入验证码',
					//     trigger: 'blur'
					// }],
					passwords: [{
						required: true,
						message: '请再次输入密码',
						trigger: 'blur'
					}],
					oldPassword: [{
						required: true,
						message: '请输入旧密码',
						trigger: 'blur'
					}],
				},
				indexValue: 0,
				phoneBool: false,
				loading: false
			}
		},
		onLoad() {

			this.getInfo_()
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			getInfo_() {
				getInfo().then(res => {
					console.log("个人信息", res);
					this.form = res.data.user
					this.upLoadImages.url = res.data.user ? res.data.user.avatar ? res.data.user.avatar : "" : ""
					uni.setStorageSync("my_userInfo", res.data)
					let obj = uni.getStorageSync("my_userInfo")
					console.log("my_userInfo", obj);
					this.input = obj.user.phonenumber

				})
			},
			userDeleteApi() {
				this.dialogVisible = true

			},
			changePhone() {
				uni.navigateTo({
					url: "/pages/my/setting/admin/changePhone/changePhone"
				})
			},
			sure() {
				userDelete().then(res => {
					this.$message({
						type: 'success',
						message: `${res.msg}`,
						center: true,
						offset: 0.1
					});
					this.unlogin()
					
				}).catch(res => {
					this.$message({
						type: 'error',
						message: `${res.msg}`,
						center: true,
						offset: 0.1
					});
				})
			},
			unlogin() {
				uni.removeStorageSync('userInfoData_') //移除登录信息
				setTimeout(() => {
					uni.navigateTo({
						url: "/pages/login/login"
					})
				}, 1000)
			},
			updateUserInfoApi(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let params = {
							"email": this.form.email,
						}
						this.loading = true
						updateUserInfo(params).then(res => {
							console.log(res.data);
							if (res.code == 200) {
								this.$message({
									type: 'success',
									message: '修改成功!',
									center: true,
									offset: 0.1
								});
								this.loading = false
								this.getInfo_()
								// this.$router.push("login?id=login")
								// setTimeout(() => {
								//     location.reload()
								// }, 100);
							} else {
								this.loading = false
								this.$message({
									type: 'error',
									message: res.msg,
									center: true,
									offset: 0.1
								});
							}

						})
					} else {
						console.log('error submit!!');
						return false;
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.setting_content {
		padding: 10px 0px;
		height: calc(100vh - 104px);
		background: #F8F9FA;
		position: relative;
		overflow-y: auto;

		.admin_main {
			padding: 10px 12px;
			width: calc(100% - 24px);
		}

		.position_footer {
			height: 40px;
			z-index: 1;
			position: fixed;
			bottom: 0;
			background: #ffffff;
			box-shadow: 0px -1px 3px 0px rgba(48, 48, 48, 0.0592);
			border-radius: 0px 0px 0px 0px;
			opacity: 1;
			width: calc(100vw - 24px);
			padding: 12px;

			.blue_btn {
				background: #2F6CBC;
				border: 1px solid #2F6CBC;
			}
		}
	}
</style>
